import React from "react";

import Button from "@material-ui/core/Button";
import FormControl from "@material-ui/core/FormControl";
import InputAdornment from "@material-ui/core/InputAdornment";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Menu from "@material-ui/core/Menu";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
import { useTranslation } from "react-i18next";
import { Typography } from "@material-ui/core";

export interface SellBoxProps {
  anchorEl: any;
  handleClick: () => void;
  handleClose: () => void;
}

const SellBox = (props: SellBoxProps) => {
  const { t } = useTranslation();
  const { handleClick, anchorEl, handleClose } = props;
  return (
    <>
      <div className="d-block d-md-flex align-items-center justify-content-center header-btns width-70">
        <FormControl variant="outlined" className="input-field">
          <OutlinedInput
            inputComponent="input"
            type="number"
            className="arrows-hide"
            classes={{
              input: "font-size-lg font-weight-bold p-4 h-auto currency-input ",
              notchedOutline: "border-1",
            }}
            endAdornment={
              <InputAdornment className="filled-dropdown" position="end">
                <Button
                  size="small"
                  onClick={handleClick}
                  className="btn-neutral-dark d-flex align-items-center input-dropdown"
                >
                  <span className="btn-wrapper--label">USD</span>
                  <ArrowDropDownIcon />
                  <span className="btn-wrapper--icon d-flex"></span>
                </Button>
                <Menu
                  anchorEl={anchorEl}
                  keepMounted
                  getContentAnchorEl={null}
                  anchorOrigin={{
                    vertical: "center",
                    horizontal: "center",
                  }}
                  transformOrigin={{
                    vertical: "center",
                    horizontal: "center",
                  }}
                  open={Boolean(anchorEl)}
                  classes={{ list: "p-0" }}
                  onClose={handleClose}
                >
                  <div className="p-2">
                    <List
                      component="div"
                      className="nav-pills p-0 m-0 nav-neutral-dark flex-column"
                    >
                      <ListItem
                        button
                        href="#/"
                        onClick={(e) => e.preventDefault()}
                        className="px-3 mx-2"
                      >
                        <span>USD</span>
                      </ListItem>
                      <ListItem
                        button
                        href="#/"
                        onClick={(e) => e.preventDefault()}
                        className="px-3 mx-2"
                      >
                        <span>Euro</span>
                      </ListItem>
                      <ListItem
                        button
                        href="#/"
                        onClick={(e) => e.preventDefault()}
                        className="px-3 mx-2"
                      >
                        <span>Yen</span>
                      </ListItem>
                    </List>
                  </div>
                </Menu>
              </InputAdornment>
            }
            labelWidth={0}
          />
        </FormControl>
        <Typography
          className="my-3  px-4"
          variant="subtitle1"
          color="textPrimary"
        >
          1 btc is fifteen thousounds and four hundred fifty six USD Dollars
        </Typography>

        <FormControl variant="outlined" className="input-field">
          <OutlinedInput
            type="number"
            className="arrows-hide"
            classes={{
              input: "font-size-lg font-weight-bold p-4 h-auto currency-input ",
              notchedOutline: "border-1",
            }}
            endAdornment={
              <InputAdornment className="filled-dropdown" position="end">
                <Button
                  size="small"
                  onClick={handleClick}
                  className="btn-neutral-dark input-dropdown d-flex align-items-center input-dropdown "
                >
                  <span className="btn-wrapper--label">BTC</span>
                  <ArrowDropDownIcon />

                  <span className="btn-wrapper--icon d-flex"></span>
                </Button>
                <Menu
                  anchorEl={anchorEl}
                  keepMounted
                  getContentAnchorEl={null}
                  anchorOrigin={{
                    vertical: "center",
                    horizontal: "center",
                  }}
                  transformOrigin={{
                    vertical: "center",
                    horizontal: "center",
                  }}
                  open={Boolean(anchorEl)}
                  classes={{ list: "p-0" }}
                  onClose={handleClose}
                >
                  <div className="p-2">
                    <List
                      component="div"
                      className="nav-pills p-0 m-0 nav-neutral-dark flex-column"
                    >
                      <ListItem
                        button
                        href="#/"
                        onClick={(e) => e.preventDefault()}
                        selected
                        className="px-3 mx-2"
                      >
                        <span>ETH</span>
                      </ListItem>
                      <ListItem
                        button
                        href="#/"
                        onClick={(e) => e.preventDefault()}
                        className="px-3 mx-2"
                      >
                        <span>LTC</span>
                      </ListItem>
                      <ListItem
                        button
                        href="#/"
                        onClick={(e) => e.preventDefault()}
                        className="px-3 mx-2"
                      >
                        <span>XRP</span>
                      </ListItem>
                    </List>
                  </div>
                </Menu>
              </InputAdornment>
            }
            labelWidth={0}
          />
        </FormControl>
        <Button className="btn-primary px-5 font-weight-bold font-size-lg m-3 buy-btn">
          {t("buttons:sell_btn")}
        </Button>
      </div>
    </>
  );
};

export default SellBox;
